<template>
  <div class="honor">
    <div class=" honor-bg">
      <div class="honor-content honor-width" ref="honorRef">
        <Title title="光荣榜" pinyin="GUANG RONG BANG" type="1" />
        <div class="honor-list">
          <vue-seamless-scroll
              :data="listData"
              :class-option="classOption"
              class="warp"
              :style="warpWidth"
          >
            <ul class="ul-item">
              <li class="li-item" v-for="(item, index) in listData" :key="index">
                <div @mouseenter="mouseEnter" @mouseleave="mouseLeave" style="width: 100%;height: 100%" @click="handleRouter(item)">
                  <!--                {{ item.articleList[0].filePath }}-->
                  <img :src="item.articleList[0].filePath" class="background-img" alt="" />
                </div>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
// import './layout.css'

import Title from "@/components/Title.vue";
// import MarqueeText from "vue-marquee-text-component";
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  props: ['honorRollList'],
  components: { Title, vueSeamlessScroll },
  data() {
    return {
      paused: false,
      listData: [],
      classOption: {
        limitMoveNum: 1,
        direction: 2,
        step: 0.3
      },
      warpWidth: '',
    }
  },
  mounted() {
    this.warpWidth = `width: ${ this.$refs.honorRef.offsetWidth - 200 }px`
  },
  watch: {
    honorRollList: {
      handler(data){
        this.listData = data
      },
      deep: true
    }
  },
  methods: {
    mouseEnter() {
      this.paused = true
    },
    mouseLeave() {
      this.paused = false
    },
    handleRouter(item){
      if (item.out) {
        window.open(item.outHref)
      } else {
        if (item.id) {
          const { href } = this.$router.resolve({
            path: `/news`,
            query: {
              id: item.id,
              type: item.articleList[0].bizType
            }
          });
          window.open(href, '_blank');
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.honor {
  width: 100%;
  margin-top: 12px;
  height: 330px;
  display: flex;
  justify-content: center;
  //background: #F2F2F2;
  //margin-bottom: 24px;
  //background: url('~@/assets/img/honor.jpg') no-repeat center;
}

.honor-bg{
  //background: url('~@/assets/img/2.png') no-repeat center;
  background-image: url('~@/assets/img/2.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.honor-content {
  //width: 1200px;
  display: flex;
  flex-direction: column;
  z-index: 99;
  //margin-bottom: 24px;
}

.honor-list {
  //width: 1200px;
  display: flex;
  flex-direction: column;
}


@media screen and (min-width: 1300px) {
  .honor-width {
    width: 1200px;
  }
}

@media screen and (min-width: 1800px) {
  .honor-width {
    width: 1400px;
  }
}

@media screen and (min-width: 2000px) {
  .honor-width {
    width: 1920px;
  }
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.li-item {
  flex: 1 1 10%;
  transition: 0.2s;
}

//.li-item:first-child:hover {
//  transform-origin: 50% 50% !important;
//  z-index: 999 !important;
//}

.li-item:hover {
  transform: scale(120%);
  z-index: 999;
}

.warp {
  //width: 300px * 6;
  margin: 0 auto;
  overflow: hidden;
}

.warp ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.ul-item {
  display: flex;
  height: 200px;
  align-items: center;
  cursor: pointer;
}

.li-item {
  width: 300px;
  height: 169px;
  margin-right: 10px;
  //line-height: 120px;
  border-radius: 5px;
  //background-color: #CB1C1B;
  color: #fff;
  text-align: center;
  font-size: 30px;
}

.li-item:hover {
  transform: scale(120%);
}

/deep/ .el-carousel__indicators {
  display: none;
}

.background-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

</style>
